<template>
  <!-- 机械设备分类列表 -->
  <base-breadcrumb>
    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="机械设备类型设置" /> -->
        <div class="table-operateors mb20">
          <a-button type="primary" icon="plus" @click="handleUpdate('add')" v-if="hideBuquBtn()">新增类型</a-button>
        </div>
        <list-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          :isScrollX="false"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :showPage="false"
        >
          <template slot="enabled" slot-scope="text, record">
            <status-display
              :status-code="record.enabled"
              :status-map="{ true : {
            label: '可用',
            color: 'green'
          }, false: {
            label: '不可用',
            color: 'red'
          }}"
            />
          </template>
          <div slot="operator" slot-scope="text, record" class="pub-table-list-action">
            <span @click="handleUpdate('edit', record)" v-if="hideBuquBtn()">编辑</span>
            <span @click="del(record)" v-if="hideBuquBtn()">删除</span>
          </div>
        </list-table>
      </a-card>
    </div>
    <update-equipment-classify
      v-if="visible.update"
      :init-data="childInitData"
      @cancel="visible.update = false"
      @confirm="handleUpdateConfirm"
    />
  </base-breadcrumb>
</template>

<script>
import StatusDisplay from '@/components/StatusDisplay'
import { delSelectListByType, getSelectListByType } from '@/api/safetySupervision/common.js'
import UpdateEquipmentClassify from './updateEquipmentClassify'
import { STable } from '@/components'

export default {
  name: 'a' + Date.now(), components: {
    STable,
    UpdateEquipmentClassify,
    StatusDisplay
  },
  data() {
    return {
      childInitData: {},
      visible: {
        update: false
      },
      columns: [
        { title: '设备类型',width:300,dataIndex: 'name' },
        { title: '设备分类',width:300, dataIndex: 'codeStr' },
        {
          title: '状态',
          dataIndex: 'enabled',
          width:100,  
          scopedSlots: { customRender: 'enabled' }
        },
        {
          title: ' 操作',
          dataIndex: 'operator',
          width:200,  
          scopedSlots: { customRender: 'operator' }
        }
      ],
      queryParam: {
        type: 13
      },
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const [err, res] = await getSelectListByType(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            resolve(res)
          }
        })
      }
    }
  },
  methods: {
    handleUpdateConfirm() {
      this.visible.update = false
      this.$refs.table.refresh(true)
    },
    del(record) {
      this.$delList3(
        async (e) => {
          const [err, res] = await delSelectListByType(e)
          if (err) {
            return { code: 500, data: [] }
          }
          return { code: this.SUCCESS_CODE, ...res }
        },
        () => {
          this.$refs.table.refresh()
        },
        { id: record.id },
        null
      )
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      this.childInitData = {
        ...data,
        pageType: type
      }
      this.visible.update = true
    }
  }
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;

    .flex-content {
      flex: auto;
    }

    .divider {
      margin: 0 12px;
    }

    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>